<template>
  <!-- <div class="scene" id="earth-canvas" ref="sceneDiv"></div> -->

  <div id="loading">
    <div class="sk-chase">
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
      <div class="sk-chase-dot"></div>
    </div>
    <!-- <div>加载资源中...</div> -->
  </div>

  <div id="html2canvas" class="css3d-wapper">
    <div class="fire-div"></div>
  </div>
  <div id="earth-canvas"></div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'

// 场景元素div
// let sceneDiv = ref(null)

import World from '../threets/world/Word.ts'

onMounted(() => {
  // // earth-canvas
  const dom = document.querySelector('#earth-canvas')
  console.log('log--> dom2', dom)

  new World({
    dom
  })
})
</script>

<style>
.scene {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
}

#earth-canvas {
  height: 100%;
  width: 100%;
  background: #010826;
}

#html2canvas {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0);
}
</style>
